[% page = "PLUGIN_IPENG" %]
[% PROCESS settings/header.html %]

[% PROCESS plugins/iPeng/settings/subpage_chooser.html %]
	<div class="settingSection">
		<div class="prefHead">[% "SETUP_PLUGIN_IPENG_ENABLED_COMMANDS" | string | upper %]</div>
		<div class="prefDesc">[% "SETUP_PLUGIN_IPENG_ENABLED_COMMANDS_DESC" | string %]</div>

	<table border="0">
		[% lastgroup = '' %]
		[%- FOREACH command IN pluginiPengCommands %]
			[% IF command.group != lastgroup %]
				<tr>
					<td colspan="3"><br><strong>[% command.group %]</strong></td>
				</tr>
			[% END %]
			<tr>
				[%- commandid = "command_" _ command.id %]
				<td><input type="checkbox" name="[% commandid | uri %]" id="[% commandid | uri %]" value="1" [% command.enabled ? "checked" : "" %] onclick="changeNumSelected(this)">
				<label for="[% commandid %]">[% command.name | html %]</label></td>
				<td>[% IF command.icon %]<img src="/iPeng/[% command.icon %]">[% END %]</td>
				<td>[% IF command.description %][% command.description %]<br>[% END %]([% command.id %])<br><br></td>
			</tr>
			[% lastgroup = command.group %]
		[%- END %]
	</table>
	<script type="text/javascript">
	<!--
		var f = document.settingsForm;
		var numSelected = 0;
		var numCheckBoxes = 0;
		var selectAllCommandsString = '[% "PLUGIN_IPENG_SELECT_COMMANDS_ALL" | string %]';
		var selectNoneCommandsString = '[% "PLUGIN_IPENG_SELECT_COMMANDS_NONE" | string %]';

		// Work out how many checkboxes are initially selected
		for (var i=0; i < f.elements.length; i++) {
			if (f.elements[i].type == 'checkbox' && String(f.elements[i].name).substring(0,7) == 'command') {
				numCheckBoxes++;
				if (f.elements[i].checked) {
					numSelected++;
				}
			}
		}

		// Select none if all are selected, else select all
		function selectAllCommands() {
			var newState = numSelected != numCheckBoxes;

			for (var i=0; i < f.elements.length; i++) {
				if (f.elements[i].type == 'checkbox' && String(f.elements[i].name).substring(0,7) == 'command') {
					f.elements[i].checked = newState;
				}
			}
			if (newState) {
				numSelected = numCheckBoxes;
				f.selectAllCommandsButton.value = selectNoneCommandsString;
			} else {
				numSelected = 0;
				f.selectAllCommandsButton.value = selectAllCommandsString;
			}
		}

		// Increase/decrease num selected every time a checkbox changes
		function changeNumSelected(checkBox) {
			if (checkBox.checked) {
				numSelected++;
			} else {
				numSelected--;
			}

			if (numSelected == numCheckBoxes) {
			  f.selectAllCommandsButton.value = selectNoneCommandsString;
			} else {
				f.selectAllCommandsButton.value = selectAllCommandsString;
			}
		}

		// Write the button using js, so it won't appear if js isn't enabled/available
		document.write('<input type="button" value="'
					   + (numSelected == numCheckBoxes ? selectNoneCommandsString : selectAllCommandsString)
									 + '" id="selectAllCommandsButton" onclick="selectAllCommands()">');
	// -->
	</script>
[% PROCESS settings/footer.html %]
